@charset "UTF-8";
.community-container .el-header {
  margin: 0;
  padding: 0;
  position: relative;
  margin-bottom: .3rem;
}

.community-container .el-header .el-menu {
  position: fixed;
  top: .8rem;
  width: 7.5rem;
  z-index: 10;
}

.community-container .nav-menu {
  display: flex;
  align-items: center;
  justify-content: space-between !important;
  font-weight: 600;
  height: .88rem;
  border-bottom: none;
}

.community-container .nav-menu .el-menu-item {
  height: 100%;
  line-height: .88rem;
  font-size: .28rem;
}

.community-container .serchbox, .community-container .publishbox {
  width: .4rem;
  height: .4rem;
}

.community-container .serchbox img, .community-container .publishbox img {
  display: block;
  width: .4rem;
}

.community-container .el-main {
  padding: 0;
  width: 7.5rem;
}

.posts {
  width: 7.5rem;
  border-bottom: 0.01rem solid #333333;
  padding: .3rem .3rem .1rem .3rem;
}

.posts .el-header {
  height: .88rem !important;
  display: flex;
}

.posts .post-title {
  height: .88rem;
  padding-left: .2rem;
}

.posts .post-title p {
  font-size: .32rem;
  font-weight: normal;
  display: block;
  height: .5rem;
  line-height: .5rem;
}

.posts .post-title span {
  display: block;
  height: .3rem;
  line-height: .3rem;
  margin-top: .08rem;
}

.posts .el-avatar {
  width: .88rem;
  height: .88rem;
}

.posts .tools {
  height: .88rem;
  width: 1.4rem;
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: space-between;
  right: 0;
  top: 0;
}

.posts .tools button {
  font-size: .28rem;
  border: none;
  background: none;
}

.posts .tools img {
  box-sizing: content-box;
  padding: .1rem;
  height: .3rem;
  width: .3rem;
}

.posts .content {
  font-weight: normal;
  font-size: .28rem;
  line-height: .45rem;
  margin: .1rem 0;
  letter-spacing: .02rem;
  overflow: hidden;
  /* 2.用省略号来代替超出文本 */
  text-overflow: ellipsis;
  /* 3.设置盒子属性为-webkit-box  必须的 */
  display: -webkit-box;
  /* 4.-webkit-line-clamp 设置为2，表示超出2行的部分显示省略号，如果设置为3，那么就是超出3行部分显示省略号 */
  -webkit-line-clamp: 2;
  /* 5.字面意思：单词破坏：破坏英文单词的整体性，在英文单词还没有在一行完全展示时就换行  即一个单词可能会被分成两行展示 */
  word-break: break-all;
  /* 6.盒子实现多行显示的必要条件，文字是垂直展示，即文字是多行展示的情况下使用 */
  -webkit-box-orient: vertical;
}

.posts .imgbox {
  width: 6.9rem;
  max-height: 4.6rem;
  margin: .1rem 0;
}

.posts .imgbox img {
  display: block;
  max-width: 6.9rem;
  max-height: 4.6rem;
}

.posts .el-footer {
  padding: 0;
  margin-top: .2rem;
  height: .55rem !important;
  display: flex;
  justify-content: space-between;
}

.posts .el-footer div {
  display: flex;
  align-items: center;
  height: 100%;
}

.posts .el-footer img {
  width: .45rem;
}

.posts .el-footer span {
  margin: 0 .15rem;
  font-size: .22rem;
  font-weight: lighter;
}

.posts .el-footer .last {
  margin-right: 0;
}

.el-main {
  width: 7.5rem;
}

.topics {
  padding: 0 .3rem;
}

.topics .topcolumnbox {
  width: 6.9rem;
  height: 1.4rem;
  display: flex;
  justify-content: space-between;
  border-bottom: 0.02rem solid rgba(153, 153, 153, 0.6);
}

.topics .topcolumnbox img {
  display: block;
  width: 2rem;
  height: 1rem;
}

.topiclist {
  width: 6.9rem;
}

.topiclist li {
  height: 2.88rem;
  border-bottom: 0.02rem solid rgba(153, 153, 153, 0.6);
}

.topic-item {
  position: relative;
  width: 100%;
  height: 100%;
  padding: .39rem 0 .39rem .54rem;
  display: flex;
  justify-content: space-between;
}

.topic-item img {
  display: block;
  width: 2.44rem;
  height: 1.72rem;
}

.top3-icon {
  position: absolute;
  width: .32rem;
  height: .52rem;
  top: .39rem;
  left: 0;
  font-size: .34rem;
  font-weight: bolder;
  line-height: .52rem;
  text-align: center;
  border-radius: .04rem;
}

.topiclist li:nth-child(1) .top3-icon {
  background: #db573e;
}

.topiclist li:nth-child(2) .top3-icon {
  background: #ff8d38;
}

.topiclist li:nth-child(3) .top3-icon {
  background: #ffc966;
}

.topic-text {
  position: relative;
}

.topic-text p {
  width: 3.39rem;
  height: 1.32rem;
  line-height: .44rem;
  font-size: .28rem;
  word-break: break-all;
  overflow: hidden;
  /* 2.用省略号来代替超出文本 */
  text-overflow: ellipsis;
  /* 3.设置盒子属性为-webkit-box  必须的 */
  display: -webkit-box;
  /* 4.-webkit-line-clamp 设置为2，表示超出2行的部分显示省略号，如果设置为3，那么就是超出3行部分显示省略号 */
  -webkit-line-clamp: 3;
  /* 5.字面意思：单词破坏：破坏英文单词的整体性，在英文单词还没有在一行完全展示时就换行  即一个单词可能会被分成两行展示 */
  word-break: break-all;
  /* 6.盒子实现多行显示的必要条件，文字是垂直展示，即文字是多行展示的情况下使用 */
  -webkit-box-orient: vertical;
}

.topic-text span {
  position: absolute;
  left: 0;
  bottom: 0;
  font-size: .24rem;
  color: #ff9625;
}
